<template>
    <div class="goodsNav" >
        <ul class="navs">
            <li v-for="(item,i) in categoriesNav" :key="i" @click="itemClick(i,item)">
                <span :class="{ activeNav :index===i}">{{ item.title }}</span>
            </li>

        </ul>
    </div>
</template>

<script>
export default {
    props:{
        categoriesNav:{
            type:Array,
            default:[]
        }
    },
    data() {
        return {
            index: 0, //高亮下标
         
        }
    },
    methods:{
        itemClick(i,item){
            this.index=i
            this.$emit('myEvent', item)    
        }
    }
};
</script>

<style lang="scss" scoped>

.goodsNav {
  width: 100%;
  line-height: 40px;
  height: 40px;
  .navs {
    display: flex;
    height: 100%;
   
    li {
      flex: 1;
      text-align: center;
      height: 100%;
      font-size: 14px;
        display: flex;
        align-items: center;
      
      span {
        display: block;
        width: 100%;
        height: 15px;
        line-height: 15px;
        border-left: 1px solid #e6e6e6;
        &.activeNav {
                color: #ef4562;
            }
      }
    }
  }
}
</style>